<?php

require_once './config.php';

$c = mysql_connect(HOST, USER, PWD) or die("Connexion impossible au serveur");
mysql_select_db(DB) or die("Impossible de se connecter à la base de données");

$sql = "SELECT * FROM newsletter ORDER BY id DESC";

$result = mysql_query($sql) or die(mysql_error());

?>
<!doctype html>
<html lang='fr'>
    <head>
        <meta charset="utf-8">
        <title>News Letter</title>
        <link type="text/css" rel="stylesheet" href="bootstrap.min.css">
        <link type="text/css" rel="stylesheet" href="bootstrap-editable/css/bootstrap-editable.css">
        <script type="text/javascript" src="jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="bootstrap.min.js"></script>        
        <script type="text/javascript" src="bootstrap-editable/js/bootstrap-editable.min.js"></script>        
    </head>
    <body>
        <table class="table table-bordered table-condensed table-striped">
            <thead>
                <tr>
                    <td>ID</td>
                    <td>Nom de la News Letter</td>
                    <td>Contenu de la News Letter</td>
                </tr>
            </thead>
            <tbody>
            <?php while($row = mysql_fetch_assoc($result)): ?>
                <tr>
                    <td><?php echo $row['id']; ?></td>
                    <td><a href='#' class="edit" data-type='text' data-pk='<?php echo $row['id']; ?>' data-name='nom'><?php echo $row['nom']; ?></a></td>
                    <td><a href='#' class="edit" data-type='textarea' data-pk='<?php echo $row['id']; ?>' data-name='contenu'><?php echo $row['contenu']; ?></a></td>
                </tr>
            <?php endwhile; ?>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="3">&nbsp;</td>
                </tr>
                <tr>
                    <td></td>
                    <td><a href='#' id="add-nom" data-type='text' data-form=''>Nouveau Nom</a></td>
                    <td><a href='#' id="add-contenu" data-type='textarea'>Nouveau Contenu</a></td>
                </tr>
                <tr>
                    <td colspan="3"><button class="btn btn-primary btn-small" id='nouveau'>Ajouter Nouveau</button></td>
                </tr>
            </tfoot>
        </table>
        <form id='new' action='#' method="post">
            <input type='hidden' id='nom' name='nom' value=''>
            <input type='hidden' id='contenu' name='contenu' value=''>
        </form>
        <script type="text/javascript">
            $(function(){
                $('.edit').editable({
                    title: 'Edition',
                    url : 'update.php'
                });
                $('#add-nom').editable({
                    title : 'Nouveau Nom',
                    validate: function(value){
                        $('#nom').val(value);
                    },
                    placement: 'right'
                });
                $('#add-contenu').editable({
                    title : 'Nouveau Contenu',
                    validate: function(value){
                        $('#contenu').val(value);
                    },
                    placement: 'bottom'
                });
                $('#nouveau').click(function(e){
                    e.preventDefault();
                    var $ajax = $.ajax({
                        type: 'post',
                        url : 'add.php',
                        data: $('#new').serialize()
                    });
                    $ajax.done(function(data){
                        window.location.reload();
                    });
                });
            });
        </script>
    </body>
</html>

<?php mysql_close(); ?>